<template>
	<view>
		<!-- 专辑背景 -->
		<view class="album_bg">
			<image :src="album.cover" mode="widthFix"></image>
			<view class="album_info">
				<view class="album_name">{{album.name}}</view>
				<view class="album_btn">关注专辑</view>
			</view>
		</view>
		<!-- 专辑作者 -->
		<view class="album_author">
			<view class="album_author_info">
				<image :src="album.user.avatar" mode="widthFix"></image>
				<view class="anthor_name">{{album.user.name}}</view>
			</view>
			<view class="album_author_desc">
			<text>{{album.desc}}</text>	
			</view>
		</view>
		<!-- 列表开始 -->
		<view class="album_list">
			<view class="album_item"
			v-for="(item,index) in wallpaper" :key='item.id'
		
			>
			<goDetail :list='wallpaper' :index='index'>
				<image :src="item.thumb+item.rule.replace('$<Height>',360)" mode="aspectFill"></image>
			</goDetail>
			</view>
		</view>
	</view>

</template>

<script>
	import goDetail from '@/components/goDetail.vue'
	export default {
		data() {
			return {
				params: {
					limit: 30,
					order: 'new',
					skip: 0,
					//1 返回所有数据 0 只返回wallpaper数据
					first: 1
				},
				id: -1,
				album: {},
				wallpaper: [],
				hasMore: true
			}
		},
		components: {
			goDetail,
		},
		onLoad(options) {
			this.id = options.id
			// this.id = '5e5cf679e7bce739db1281e4'
			// this.id='5d5f8e45e7bce75ae7fb8278'
			this.getList()
		},
		methods: {
		async	getList() {
		const result = await this.request({
			url: `http://157.122.54.189:9088/image/v1/wallpaper/album/${this.id}/wallpaper`,
			data: this.params
			})
			if(Object.keys(this.album).length === 0) {
				this.album = result.res.album
			}
			if(result.res.wallpaper.length === 0) {
				uni.showToast({
					title: '没有更多好图了',
					icon: 'none'
				})
				this.hasMore = false
				return;
			}
			this.wallpaper = [...this.wallpaper, ...result.res.wallpaper]
		}
		},
		onReachBottom() {
			if(this.hasMore) {
				this.params.first = 0
				this.params.skip += this.params.limit
				this.getList()
			} else {
				uni.showToast({
					title: '没有更多好图了',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="less">
  .album_bg {
		position: relative;
  .album_info {
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			height: 80rpx;
			align-items: center;
			color: #fff;
			padding: 0 15rpx;
      .album_name {
       font-size: 40rpx;
			}
			.album_btn {
				background-color: #d52a7e;
				width: 152rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 10rpx;
			}
  }
}
  .album_author {
		padding: 10rpx;
    .album_author_info {
			display: flex;
			padding: 10rpx 0;
    image {
			width: 50rpx;
    }
      .anthor_name {
				margin-left: 15rpx;
				color: #000;
    }
  }
}
	.album_list {
		display: flex;
		flex-wrap: wrap;
		.album_item {
			width: 33.33%;
			border: 3rpx solid #fff;
			image {
				height: 160rpx;
			}
		}
}
</style>
